<template>
	<view class="logoBox">
		<image src="https://www.yongshantuan.cn/images/yongshan/logo.png" mode="" class="logo"></image>
		<view class="telBox">
			<u-input type="text" placeholder="账户名" v-model="username" :clearable="false"></u-input>
		</view>
		<view class="codeBox">
			<u-input type="password" placeholder="密码 " v-model="password" :clearable="false" :passwordIcon="false"></u-input>
		</view>
		<view class="commenButton" @click="submit">登录</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		login
	} from '@/utils/req/api.js'
	export default {
		data() {
			return {
				num: 60,
				timer: '',
				username: '',
				password: ''
			}
		},
		onShow(){
			if(uni.getStorageSync('token')){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}
		},
		methods: {
			async submit() {
				let res = await login({
					username:this.username,
					password:this.password,
					checkKey:'yongshantuanh5'
				});
				if (res.data.success) {
					this.$showToast.call(this, '登录成功')
					uni.setStorageSync('token', res.data.result.token)
					uni.navigateTo({
						url: '../index/index'
					})
				} else {
					this.$showToast.call(this, res.data.message, 'warning')
				}
			}
		},
		onUnload() {
			clearInterval(this.timer)
		}
	}
</script>

<style lang="scss" scoped>
	.logoBox {
		@include flex(center, center);
		flex-direction: column;
		min-height: 100vh;
		padding: 0 40rpx;

		.logo {
			width: 150rpx;
			height: 150rpx;
			margin-bottom: 50rpx;
		}

		.telBox,
		.codeBox {
			width: 100%;
			margin: 20rpx 0;
			background-color: #ECECEC;
			border-radius: 100rpx;
			padding: 5rpx 0;
		}

		.codeBox {
			position: relative;

			.getCode {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 28rpx;
				line-height: 28rpx;
				min-width: 30%;
				max-width: 50%;
				height: 100%;
				@include flex(center, center);
				color: #FA690A;
				padding-right: 20rpx;
			}

			.dis {
				color: rgba(0, 0, 0, 0.35);
			}
		}

		.commenButton {
			padding: 20rpx 0;
			background-color: #FA690A;
			margin-top: 40rpx;
		}
	}
</style>
<style lang="scss">
	.telBox,
	.codeBox {
		.u-input {
			border: 1px solid red;
			border-color: rgba(0, 0, 0, 0) !important;
			text-indent: 40rpx;
			color: rgba(0, 0, 0, 0.35);
			line-height: 2;
			font-size: 28rpx !important;
		}


		/deep/ .u-input__input {
			font-size: 28rpx;
		}
	}

	.codeBox {
		// .u-input {
		// 	width: 50%;
		// 	.uni-input-wrapper{
		// 		width: 100%;
		// 	}
		// }
	}
</style>
